<!DOCTYPE html>
<!-- 
	H5+CSS+JavaScript入门学习
	https://blog.csdn.net/qq_40575302/article/details/119296671
	
	
	https://www.runoob.com/try/try.php?filename=tryhtml5_video_js_prop
 -->
<html>
	<head>
		<meta charset="utf-8">
		<title>media</title>
	</head>
	<body>
		<div>
			<audio src="../asset/audio/game_bg.mp3" autoplay controls></audio>
		</div>
		<div style="text-align: center; margin-top: 30px;">
	
			<button onclick="playPause()">播放/暂停</button>
			<button onclick="makeBig()">放大</button>
		    <button onclick="makeSmall()">缩小</button>
		    <button onclick="makeNormal()">普通</button>
			<br> 
			
			<!-- 
				默认的封面图，可以通过属性poster设置
			 -->
			<video id="video1" width="420" controls="true" preload="none" poster="../images/game_thumb.png" >
				<!-- <source src="../asset/video/video.mp4" type="video/mp4"> -->
				<source src="https://amiapp.placergames.com/amigo_file/default/video/video.mp4"/>
			</video>
		</div>
		<script>
			var myVideo = document.getElementById("video1")
			function playPause(){
				if(myVideo.paused){
					myVideo.play();
				}else{
					myVideo.pause()
				}
			}
			
			function makeBig(){
				myVideo.width = 560
			}
			
			function makeSmall(){
				myVideo.width = 320
			}
			
			function makeNormal(){
				myVideo.width = 420
			}
		</script>
	</body>
</html>